<%--
  Created by IntelliJ IDEA.
  User: zrw
  Date: 2020/4/1
  Time: 10:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>外呼项目</title>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        h1 {
            color: #86868b;
            font-size: 22px;
            text-align: center;
        }
        .block {
            width: 600px;
            margin: 20px auto;
        }
        .demonstration {
            color: #86868b;
            font-size: 14px;
        }
        input.el-input__inner {
            color: #86868b;
            font-weight: 600;
        }
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
        .el-table .cell {
            color: #86868b;
            font-size: 14px;
            font-weight: normal;
        }
        .el-pagination {
            margin-left: -4px;
            margin-top: 10px;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>当日外呼项目成交量统计</h1>
    <div id="app">
        <template>
            <div class="block">
                <span class="demonstration">选择查询日期：</span>
                <el-date-picker
                    v-model="value1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    @change="getSelectedTime">

                </el-date-picker>
            </div>
            <div class="block">
                <span class="demonstration">项目总数：</span>
                <el-badge :value="count" type="warning"></el-badge>
                <span class="demonstration">成交总量：</span>
                <el-badge :value="sucs" type="success"></el-badge>
            </div>
            <div class="block">
                <el-table
                    :data="tableData"
                    border
                    style="width: 600px;">
                    <el-table-column
                        prop="id"
                        label="序号"
                        width="60">

                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="项目名"
                        width="440">

                    </el-table-column>
                    <el-table-column
                        prop="success"
                        label="成交量"
                        width="100">

                    </el-table-column>
                </el-table>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    page-size="6"
                    :total="total"
                    @current-change="getCurrentPage">

                </el-pagination>
            </div>
        </template>
    </div>
    <script>
        var Main = {
            data() {
                return {
                    value1: '${now}',
                    count: ${count},
                    sucs: ${sucs},
                    tableData: ${data},
                    total: ${count}
                }
            },
            methods: {
                getSelectedTime(val) {
                    var _this = this;
                    $.ajax({
                        type: 'post',
                        url: 'getProjectData',
                        data: 'date=' + val,
                        success: function(data) {
                            _this.tableData = data;
                            _this.count = data[0].count;
                            _this.sucs = data[0].sucs;
                            _this.total = data[0].count;
                        }
                    });
                },
                getCurrentPage(val) {
                    var _this = this;
                    var date = this.value1;
                    $.ajax({
                        type: 'post',
                        url: 'getProjectData',
                        data: 'date=' + date + '&start=' + val,
                        success: function(data) {
                            _this.tableData = data;
                        }
                    });
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
</body>
</html>
